<template>
  <el-drawer
    :append-to-body="true"
    title="抄送人"
    v-model="visible"
    :show-close="false"
    :size="550"
  >
    <div class="drawer_content">
      <el-radio-group v-model="radio1">
        <el-radio-button :value="1">基础设置</el-radio-button>
        <!-- <el-radio-button :value="2">表单权限</el-radio-button> -->
      </el-radio-group>
      <div class="personnel_box" v-show="radio1 == 1">
        <div class="who_can_submit"></div>
        <div class="per_content">
          <span class="title">按人员选取</span>
          <el-button type="primary" link @click="addPromoter">选取</el-button>
          <el-button type="primary" link @click="clearData(0)">
            清除
          </el-button>
          <div class="name_box">
            <el-tag
              v-for="(u, i) in flowPromoter"
              :key="i"
              closable
              type="info"
              @close="delUser(0, i)"
            >
              {{ u.name }}
            </el-tag>
          </div>
        </div>
        <div class="per_content">
          <span class="title">按职务选取</span>
          <el-button type="primary" link @click="addDept(1)">选取</el-button>
          <el-button type="primary" link @click="clearData(1)">
            清除
          </el-button>
          <div class="name_box">
            <el-tag
              v-for="(u, i) in flowDuties"
              :key="i"
              closable
              type="info"
              @close="delUser(1, i)"
            >
              {{ u.name }}
            </el-tag>
          </div>
        </div>
        <div class="per_content">
          <span class="title">按部门选取</span>
          <el-button type="primary" link @click="addDept(2)">选取</el-button>
          <el-button type="primary" link @click="clearData(2)">
            清除
          </el-button>
          <div class="name_box">
            <el-tag
              v-for="(u, i) in flowDept"
              :key="i"
              closable
              type="info"
              @close="delUser(2, i)"
            >
              {{ u.name }}
            </el-tag>
          </div>
        </div>
      </div>
      <div class="table_box" v-show="radio1 == 2">
        <el-table
          :data="tableData"
          border
          stripe
          height="calc(100vh - 200px)"
          :header-cell-style="{ backgroundColor: '#f2f2f2' }"
        >
          <el-table-column label="字段名称" prop="fieldName" align="center" />
          <el-table-column align="center">
            <template #header>
              <el-checkbox
                v-model="tableCheck.readable"
                :indeterminate="tableCheck.isReadableIndeterminate"
                @change="handleReadableChange"
              >
                可读
              </el-checkbox>
            </template>
            <template #default="{ row }">
              <el-checkbox v-model="row.readable" @change="readableChange" />
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <el-checkbox
                v-model="tableCheck.writable"
                :indeterminate="tableCheck.isWritableIndeterminate"
                @change="handleWritableChange"
                disabled
              >
                编辑
              </el-checkbox>
            </template>
            <template #default="{ row }">
              <el-checkbox
                v-model="row.writable"
                disabled
                @change="writableChange"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="savePromoter">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <!-- 按人员选取 -->
      <FlowDialogTeacherSelection
        :importVisible="promoterVisible"
        :checkedList="checkedPromoterList"
        @closeDialog="surePromoter"
      />
      <!-- 按部门职务选取 -->
      <FlowDialogDeptDutiesSelection
        :importVisible="deptDutiesVisible"
        :checkedList="checkedDeptDutiesList"
        :type="type"
        @closeDialog="sureDeptDuties"
      />
    </div>
  </el-drawer>
</template>

<script setup>
import $func from "@/utils/flow";
import { useFlowStore } from "@/stores/flow";

let store = useFlowStore();
let { setCopyer, setCopyerConfig } = store;
let copyerDrawer = computed(() => store.copyerDrawer);
let copyerConfig1 = computed(() => store.copyerConfig1);
let formFiledList = computed(() => store.formFiledList);
let visible = computed({
  get() {
    return copyerDrawer.value;
  },
  set() {
    closeDrawer();
  },
});

const state = reactive({
  radio1: 1,
  type: 1, //1为职务，2为部门
  id: 0,
  flowConfig: {},
  flowPromoter: [],
  flowDuties: [],
  flowDept: [],
  checkedDeptDutiesList: [],
  checkedPromoterList: [],
  promoterVisible: false,
  deptDutiesVisible: false,
  tableData: [],
  tableCheck: {
    readable: false,
    writable: false,
    isReadableIndeterminate: true,
    isWritableIndeterminate: true,
  },
});

const {
  radio1,
  type,
  flowPromoter,
  flowDuties,
  flowDept,
  checkedDeptDutiesList,
  checkedPromoterList,
  promoterVisible,
  deptDutiesVisible,
  tableData,
  tableCheck,
} = toRefs(state);

watch(copyerConfig1, (val) => {
  if (copyerDrawer.value) {
    state.flowPromoter = [];
    state.flowDuties = [];
    state.flowDept = [];
    state.flowConfig = val.value;
    state.id = val.id;
    val.value.nodeUserList.forEach((u) => {
      if (u.type == 1) {
        state.flowPromoter.push(u);
      } else if (u.type == 2) {
        state.flowDuties.push(u);
      } else {
        state.flowDept.push(u);
      }
    });
    // 表单权限
    if (val.value.formPermissions.length > 0) {
      // 把val.value.formPermissions没有的id添加上
      let arr = val.value.formPermissions;
      let list = JSON.parse(JSON.stringify(formFiledList.value));
      list.forEach((item) => {
        let obj = arr.find((v) => v.fieldId == item.fieldId);
        if (obj) {
          item.readable = obj.readable;
          item.writable = obj.writable;
        } else {
          item.readable = true;
          item.writable = false;
        }
      });
      state.tableData = list;
    } else {
      state.tableData = JSON.parse(JSON.stringify(formFiledList.value));
    }
    readableChange();
    writableChange();
  }
});

/** 选取人员 */
function addPromoter() {
  state.checkedPromoterList = state.flowPromoter;
  state.promoterVisible = true;
}

/** 确认人员 */
function surePromoter(data) {
  state.promoterVisible = false;
  if (!data) return;
  state.flowPromoter = data;
}
/** 选取部门职务 */
function addDept(type) {
  state.type = type;
  if (type == 1) {
    state.checkedDeptDutiesList = state.flowDuties;
  } else {
    state.checkedDeptDutiesList = state.flowDept;
  }
  state.deptDutiesVisible = true;
}
/** 确认部门职务 */
function sureDeptDuties(data) {
  state.deptDutiesVisible = false;
  if (!data) return; //点击关闭窗口
  if (state.type == 1) {
    state.flowDuties = data;
  } else {
    state.flowDept = data;
  }
}
/** 清除数据 */
function clearData(type) {
  if (type == 0) {
    state.flowPromoter = [];
  } else if (type == 1) {
    state.flowDuties = [];
  } else {
    state.flowDept = [];
  }
}
/** 单个清除数据 */
function delUser(type, index) {
  if (type == 0) {
    state.flowPromoter.splice(index, 1);
  } else if (type == 1) {
    state.flowDuties.splice(index, 1);
  } else {
    state.flowDept.splice(index, 1);
  }
}
/**
 * 改变全部可读权限
 */
function handleReadableChange(val) {
  state.tableData.forEach((u) => {
    u.readable = val;
  });
  state.tableCheck.isReadableIndeterminate = false;
}
/**
 * 改变单个可读权限
 */
function readableChange() {
  let allReadableTrue = state.tableData.every((item) => item.readable === true);
  let allReadableFalse = state.tableData.every(
    (item) => item.readable === false,
  );
  if (allReadableTrue) {
    state.tableCheck.readable = true;
    state.tableCheck.isReadableIndeterminate = false;
  } else if (allReadableFalse) {
    state.tableCheck.readable = false;
    state.tableCheck.isReadableIndeterminate = false;
  } else {
    state.tableCheck.readable = false;
    state.tableCheck.isReadableIndeterminate = true;
  }
}
/**
 * 改变全部编辑权限
 */
function handleWritableChange(val) {
  state.tableData.forEach((u) => {
    u.writable = val;
  });
  state.tableCheck.isWritableIndeterminate = false;
}
/**
 * 改变单个编辑权限
 */
function writableChange() {
  let allWritableTrue = state.tableData.every((item) => item.writable === true);
  let allWritableFalse = state.tableData.every(
    (item) => item.writable === false,
  );
  if (allWritableTrue) {
    state.tableCheck.writable = true;
    state.tableCheck.isWritableIndeterminate = false;
  } else if (allWritableFalse) {
    state.tableCheck.writable = false;
    state.tableCheck.isWritableIndeterminate = false;
  } else {
    state.tableCheck.writable = false;
    state.tableCheck.isWritableIndeterminate = true;
  }
}
function savePromoter() {
  const summarizeData = state.flowPromoter.concat(
    state.flowDuties,
    state.flowDept,
  );
  state.flowConfig.nodeUserList = summarizeData;
  state.flowConfig.formPermissions = state.tableData;
  state.flowConfig.error = !$func.setApproverStr(state.flowConfig);
  setCopyerConfig({
    value: state.flowConfig,
    flag: true,
    id: state.id,
  });
  closeDrawer();
}

function closeDrawer() {
  setCopyer(false);
}
</script>

<style lang="scss" scoped>
.drawer_content {
  padding: 20px 20px 0;
  :deep(.el-radio-button__inner) {
    width: 510px;
  }
}
.personnel_box {
  .who_can_submit {
    margin: 20px 0 6px 0;
    font-size: 14px;
  }
  .per_content {
    .title {
      display: inline-block;
      font-size: 14px;
      margin: 8px 20px 0 0;
    }
    .name_box {
      width: 100%;
      height: 130px;
      margin-top: 5px;
      padding: 0 4px 4px 0;
      border: 1px solid #dcdfe6;
      font-size: 14px;
      border-radius: 5px;
      overflow-y: auto;
      .el-tag {
        margin: 4px 0 0 4px;
      }
    }
  }
}
.table_box {
  margin-top: 20px;
}
</style>
